<template>
 <div class="app-page">
   <div class="giftbg">
     <div class="washcar9point9" v-if="couponIndex==0"></div>
     <div class="dl38" v-if="couponIndex==1"></div>
     <div class="air38" v-if="couponIndex==2"></div>
     <div class="baoyangairunint88" v-if="couponIndex==3"></div>
     <p class="tips">礼券已发送您的车享账户中，<a class="view" @click = "qqbck" ca ="201788_cxjylhd_wdyhq$券中心">立即查看</a></p>
   </div>
   <div class="moreTips" v-if="isShowMore">还有好友大礼包<br />赶紧分享，再得一份好礼</div>
   <footer>
     <div class="showBtn">
       <a  class="share" v-if="shareIcon&&isShowShare" @click="popShare" ca="201788_cxjylhd_sharelb$分享礼包"></a>
       <a  class="share-me"  v-if="!shareIcon" @click="gotoIndex" ca="201788_cxjylhd_fhhdy$礼包领取结果页我也要礼包"></a>
       <a  class="moreGiftBtn" @click="gotoMore" ca="201788_cxjylhd_cxjfhc$更多优惠"></a>
     </div>
     <div class="scroollWrap" v-if="userGeted">
        <ul :style="{top}">
          <li v-for="item in prizeList">{{item}}</li>
        </ul>
     </div>
   </footer>
   <!--微信分享朋友圈引导弹框-->
     <div class="popupshare-bg" v-show="popupShare" v-on:click="popupshareControl"></div>
 </div>
</template>
<script type="text/javascript">
import common from "../../../assets/js/common.js";
import {Toast, Popup} from 'mint-ui';
import Vue from 'vue';
Vue.component(Popup.name, Popup);
export default {
    data () {
        return {
          shopUrl: '',
          MoreUrl: '',
          couponUrl: '',
          signUrl: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? common.isEnv("//recruit") : common.isEnv("//wx"),
          isShowMore: false,
          userGeted: true,
          activeIndex: 0,
          prizeList: ["183****4172 恭喜抽中4L小保养套餐","158****0871 恭喜抽中免费机器打蜡","139****7365 恭喜抽中车享家定制雨刮","136****1192 恭喜抽中可视化空调清洗","138****5609 恭喜抽中4L小保养套餐","135****0907 恭喜抽中可视化空调清洗","138****1631 恭喜抽中免费机器打蜡","158****5075 恭喜抽中车享家定制雨刮","189****4775 恭喜抽中免费机器打蜡","187****8223 恭喜抽中车享家定制雨刮","138****6879 恭喜抽中可视化空调清洗","182****8707 恭喜抽中4L小保养套餐","137****1641 恭喜抽中可视化空调清洗","138****1867 恭喜抽中免费机器打蜡","137****1015 恭喜抽中车享家定制雨刮","138****0419 恭喜抽中免费机器打蜡","133****7269 恭喜抽中4L小保养套餐","130****0166 恭喜抽中免费机器打蜡","137****7371 恭喜抽中车享家定制雨刮","138****8072 恭喜抽中可视化空调清洗","139****9065 恭喜抽中免费机器打蜡","135****7081 恭喜抽中车享家定制雨刮","134****0358 恭喜抽中可视化空调清洗","186****9196 恭喜抽中4L小保养套餐","186****2981 恭喜抽中车享家定制雨刮","139****8622 恭喜抽中可视化空调清洗","152****0311 恭喜抽中4L小保养套餐","139****8077 恭喜抽中可视化空调清洗","150****7771 恭喜抽中车享家定制雨刮","135****5396 恭喜抽中可视化空调清洗"],
          shareIcon:true,
          popupShare:false,
          couponIndex:0,
          initSignUrl:process.env.NODE_ENV == 'sit' ? common.isEnv("//recruit") : common.isEnv("//wx"),
          giftPackCode:common.getQueryString("giftPackCode"),
          isShowShare:true
        }
    },
    computed: {
      top() {
        return - this.activeIndex * 2.6 + 'rem';
      }
    },
    mounted () {
      this.initUserInfo();
      this.initGiftState();
      //打点
     /* this.$nextTick(function () {
      	common.ANA_AnalyticsScan();
      });*/

			//分享
      this.initShareInfo();
      this.couponIndex =  common.getQueryString("index");
      //滚屏
      if(this.userGeted){
        this.marqueeControl();
      }
      
    },
    methods: {
       qqbck (){
         var env = process.env.NODE_ENV;
          console.log(env,"env");
          var isApp = common.isApp();
          if(!isApp){
            var urlMap = {
                'prod':'//member.chexiang.com/m/coupon.htm',
                'pre':'//member.chexiangpre.com/m/coupon.htm',
                'sit':'//member.chexiangsit.com/m/coupon.htm'
            }
          }else{
           //个人中心券列表
            var urlMap = {
                'prod':'//cxjapp.chexiang.com/service/usercoupon/getUserCouponList/1?couponType=1&userId=',
                'pre':'//cxjapp.chexiangpre.com/service/usercoupon/getUserCouponList/1?couponType=1&userId=',
                'sit':'//cxjapp.chexiangsit.com/service/usercoupon/getUserCouponList/1?couponType=1&userId='
            };
          }
            window.location.href= urlMap[env]||urlMap['prod'];
      },
      gotoIndex:function(){
         window.location.href = window.location.protocol + "//" + window.location.host + "/cx/cxj/cxjweb/share/share.shtml";
      },
      initShareInfo:function(){
          var _this = this;
            _this.shareObj = {
              friend:{
                shareTitle:"0元洗车，1元打蜡，1元空气净化……海量养车优惠券，开帽等你抢！",
                descContent:"8.8来车享，养车优惠一起享！",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/share.jpg",
                lineLink:window.location.protocol + "//" + window.location.host + "/cx/cxj/cxjweb/share/packs/packs.shtml?giftPackCode="+_this.giftPackCode
              },
              friendQuan:{
                shareTitle:"0元洗车，1元打蜡，1元空气净化……海量养车优惠券，开帽等你抢！",
                descContent:"",
                imgUrl:"https://s2.cximg.com/cms/wap/resource/chexiangjiaP/320CXJPC/image/others/share.jpg",
                lineLink:window.location.protocol + "//" + window.location.host + "/cx/cxj/cxjweb/share/packs/packs.shtml?giftPackCode="+_this.giftPackCode
              }
            }
          if(!common.isApp()){
             common.initWxShare(_this, _this.initSignUrl, _this.shareObj, 1,function(){
                 // _this.shareSucess88();
             });
          }
        },
        isDiDa:function(){
          var ua = window.navigator.userAgent;//获取ua
          if(ua.indexOf("DidaPinche")>=0){
            return true;
          }else{
            return false;
          }
        },
        base64Encode(input){
          var rv;
          rv = encodeURIComponent(input);
          rv = unescape(rv);
          rv = window.btoa(rv);
          return rv;
        },
        popShare:function(){
          var _this= this;
          if(common.isApp()){ 
              lb.shareInfo({
                  url : _this.shareObj.friend.lineLink,
                  title : _this.shareObj.friend.descContent,
                  content : _this.shareObj.friend.shareTitle,
                  imgUrl : _this.shareObj.friend.imgUrl
              },function (data) {
                if(data.errorCode == 0){
                  if(!_this.isSuccess){
                   //Toast("分享成功");
                    //_this.shareSucess88();
                    window.setTimeout(function(){
                        window.location.href=window.location.href+"?id="+10000*Math.random();
                    },2000)
                  }
                  //Toast(data.errorCode)
                }else{
                  Toast("分享失败");
                }
              })
          }else if(_this.isDiDa()){
            var share = {};
               share.t = "0元洗车，1元打蜡，1元空气净化……海量养车优惠券，开帽等你抢！";
               share.d = "8.8来车享，养车优惠一起享！";
               share.i = "";
               share.u = window.location.protocol + "//" + window.location.host + "/cx/cxj/cxjweb/share/packs/packs.shtml?giftPackCode="+_this.giftPackCode;//这里放分享之后页面的链接
            var encodeurl = "http://n/" + _this.base64Encode(JSON.stringify(share));
            window.location.href = encodeurl;
          }else {
             _this.popupShare = !_this.popupShare;
          }
        },
        popupshareControl:function(){
           this.popupShare = !this.popupShare;
        },
        /* shareSucess88:function(){
          Toast("分享成功");
          this.$http.get(common.isdev()+"/service/x1788/shared").then(function(d){
              window.location.reload();
              console.info(d);
          },function(err){
              Toast(err);
          })
        },*/
      initGiftState:function(){
         var  _this = this;
         var giftPackCode = _this.giftPackCode;
         _this.$http.get(common.isdev() + "/service/x1788/user/state?giftPackCode="+giftPackCode).then(function(d) {
          var obj = JSON.parse(d.bodyText);
          var code = obj.code?obj.code:"",
          result = obj.result?obj.result:"",
          coupon = result.couponVO?result.couponVO:"";
          if(code==0){
             var state = result.state;
             if(state === 0){
                var backUrl = encodeURIComponent(window.location.href);
                console.log(backUrl);
                window.location.href = common.isdev() + "/service/error/user_not_logined?backUrl="+backUrl;
             }else if(state === 8||state === 7){
                _this.shareIcon = false;
             }else if(state === 6){
                _this.isShowShare = false;
                _this.shareIcon = false;
             }
          }
        }, function(err) {
           Toast(err);
        });
      },
      initUserInfo:function(){
        var _this = this;
        _this.$http.get(common.isdev() + "/service/x1788/user/lucky?giftPackCode="+_this.giftPackCode).then(function(d) {
          var obj = JSON.parse(d.bodyText);
          var code = obj.code?obj.code:"",
          result = obj.result?obj.result:"";
          if(code==0){
             _this.prizeList = result;
          }
        }, function(err) {
           Toast(err);
        });
      },
       gotoMore:function(){
          var env = process.env.NODE_ENV;        
          var urlMap = {
            'prod':'//h.jia.chexiang.com/cx/cxj/cxjweb/cxjpsessions/cxjpsessions.shtml?channel=cx_cxj_201788_88djyqx_20170807',
            'pre':'//h.jia.chexiangpre.com/cx/cxj/cxjweb/cxjpsessions/cxjpsessions.shtml?channel=cx_cxj_201788_88djyqx_20170807',
            'sit':'//h.jia.chexiangsit.com/cx/cxj/cxjweb/cxjpsessions/cxjpsessions.shtml?channel=cx_cxj_201788_88djyqx_20170807'
          }
            window.location.href= urlMap[env]||urlMap['prod'];
        },
    	
      //滚动信息
      marqueeControl() {
        setInterval( _ => {
          if(this.activeIndex < this.prizeList.length-1) {
            this.activeIndex += 1;
          } else {
            this.activeIndex = 0;
          }
        }, 1500);
      },


    } 
}  
  
</script>
<style lang="scss">
@import '../../../assets/css/common.scss';
@function rem($px){
  @return $px / 40 * 1rem;
}
img{width:100%;max-width:100%;height:auto;}
html,body{height:100%;overflow:hidden;}
body{background:url('../../../assets/image/share/pack_bg.jpg') center top no-repeat;background-size:100% 100%;max-width:750px;margin:0 auto;
  .app-page{text-align:center;
    .giftbg{width:rem(1500);height:rem(1294);padding-top:rem(740);background:url('../../../assets/image/share/getCouponbg.png') no-repeat;background-size:100%;position:relative;
      .dl38{margin-top:rem(81);height:rem(286);margin-bottom:rem(150);background:url('../../../assets/image/share/38dlcopon.png') center top no-repeat;background-size:auto 100%;}
      .air38{margin-top:rem(81);height:rem(306);margin-bottom:rem(150);background:url('../../../assets/image/share/38aircoupon.png') center top no-repeat;background-size:auto 100%;}
      .washcar9point9{margin-top:rem(81);height:rem(286);margin-bottom:rem(150);background:url('../../../assets/image/share/99xichecoupon.png') center top no-repeat;background-size:auto 100%;}
      .baoyangairunint88{height:rem(400);background:url('../../../assets/image/share/coupon04.png') center top no-repeat;background-size:auto 100%;margin-bottom:rem(100)}
      .tips{color:$_fff;font-size:rem(49.26);
        .view{color:#e0b13f;text-decoration:underline;}
      }
    }
    footer{position:fixed;bottom:0;width:100%;max-width:750px;
      .showBtn{align-items:center;
      .share{
      display:inline-block;
      background:transparent url("../../../assets/image/share/share-gifts.png") no-repeat center center;
      background-size:rem(689) rem(254);
      width:rem(689);
      height:rem(254);
    }
      .share-me{
      display:inline-block;
      background:transparent url("../../../assets/image/share/share-me.png") no-repeat center center;
      background-size:rem(689) rem(254);
      width:rem(689);
      height:rem(254);
    }
        .moreGiftBtn{display:inline-block;width:rem(704);height:rem(254);background:url('../../../assets/image/share/more.png') no-repeat;background-size:auto 100%;}
      }
      .scroollWrap{height:rem(265);overflow:hidden;background:url('../../../assets/image/share/gradient_bg.png') no-repeat;background-size:100%;padding:rem(30) 0;
        ul{position:relative;transition: top 1s;
          li{font-size:rem(52.17);line-height:2;color:$_fff; text-align:left;padding-left:rem(320)}
        }
      }
    }
  }
}
.popupshare-bg{
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    height:100%;
    background:#000 url("../../../assets/image/share/share-bg.png") no-repeat bottom left;
    background-size:contain;
    z-index:10000;
    background-color: rgba(11, 23, 43, 0.8);
}

</style>

